<template>
  <div>
    <Divider plain orientation="left">个人素材</Divider>
    <div class="box">
      <img :src="item.src" alt="" :key="item" v-for="item in iFootageList" @click="addIItem(item)" >
    </div>
    <Divider plain orientation="left">推荐素材</Divider>
    <div class="box">
        <img :src="item.src" alt="" :key="item" v-for="item in rFootageList" @click="addItem(item)" >
    </div>

  </div>
</template>

<script>
import { v4 as uuid } from 'uuid';
const defaultPosition = {
  left: 100, top: 100,  shadow: '', fontFamily: '1-1'
}
export default {
  name: 'ToolBar',
  inject: ['canvas', 'fabric'],
  data() {
    return {
      arr:[],
      rFootageList:[],
      iFootageList:[],
    }
  },
  created(){
  },
  mounted() {
    this.initRList()
    this.initIList()
  },
  methods: {
    getIndex(start, end){
      const arr = Array(end - (start - 1)).fill('')
      return arr.map((item, i) => (i + start))
    },
    initIList(){
      if(this.$store.state.token === ""){
        confirm("未登录无法获取个人素材、模板、背景图片")
        return
      }
      this.$http.post(
          'api/posterEditor/getIFootageList/',
          {
            token:this.$store.state.token,
          },
      ).then(res => {
        console.log(res.data)
        if(res.data.code === 0){
          confirm(res.data.message)
        }else{
          // this.footageList = res.data
          this.iFootageList = []
          for(var item of res.data){
            this.iFootageList.push({
              id:item.pk,
              name:item.fields.i_footage_name,
              src:'api/'+item.fields.i_footage_src,
              type:item.fields.i_footage_type,
            })
          }
        }
      })
    },
    initRList(){
      this.$http.post(
          '/api/posterEditor/getrfootages/',
          {}
      ).then((res)=>{
        console.log(res)
        for(var item of res.data){
          this.rFootageList.push({
            id:item.pk,
            name:`素材${item.fields.r_footage_name}`,
            src:'api/'+item.fields.r_footage_src,
            type:item.fields.r_footage_type,
          })
        }
      })
    },
    // 按照类型渲染
    addIItem(e){
      if(e.type === 'svg'){
        const url = e.src
        console.log(url)
        this.fabric.loadSVGFromURL(url, (objects, options) => {
          var item = this.fabric.util.groupSVGElements(objects, {...options, ...defaultPosition,
            id: uuid(),
            name: 'svg元素'
          });
          item.scale(150/item.height)
          this.canvas.c.add(item)
          this.canvas.c.renderAll()
        });
      }else {
        const imgEl = document.createElement('img');
        imgEl.src = e.src
        // 插入页面
        // document.body.appendChild(imgEl);
        imgEl.onload = () => {
          // 创建图片对象
          const imgInstance = new this.fabric.Image(imgEl, {
            id: uuid(),
            name: '图片1',
            left: 100, top: 100,
          });
          // 设置缩放
          imgInstance.scale(150/imgInstance.height);
          this.canvas.c.add(imgInstance)
          this.canvas.c.setActiveObject(imgInstance);
          this.canvas.c.renderAll()
          // 删除页面中的图片元素
          imgEl.remove()
        }
      }
    },
    addItem(e) {
      
      const url = e.src
      console.log(url)
      this.fabric.loadSVGFromURL(url, (objects, options) => {
        var item = this.fabric.util.groupSVGElements(objects, {...options, ...defaultPosition,
          id: uuid(),
          name: 'svg元素'
        });
        console.log(item.height)
        item.scale(150/item.height)
        this.canvas.c.add(item)
        this.canvas.c.renderAll()
      });
    },
  }
};
</script>

<style scoped lang="less">

img {
  display: inline-block;
  width: 53px;
  margin-left: 2px;
  margin-bottom: 2px;
  background: #F5F5F5;
  padding: 6px;
  cursor: pointer;
}
</style>
